<template>
  <Drawer
    :maskClosable="true"
    :destroyOnClose="true"
    :closable="true"
    width="100%"
    v-model:visible="visible"
    title="组件管理"
  >
    <span v-per="'addComponent'">
      <Button class="float-right md:mx-5 md:my-5" @click="componentHandler" type="primary"> 新增组件</Button></span
    >
    <Table class="main-table" :bordered="true" :dataSource="compList" :columns="columns" :pagination="false">
      <template #bodyCell="{ column, text, record }">
        <template v-if="['name', 'port', 'contextPath', 'label'].includes(column.dataIndex)">
          <div>
            {{ text }}
          </div>
        </template>
        <template v-if="column.dataIndex === 'action'">
          <span v-per="'editComponent'"> <a @click="edit(record)" v-if="record.modifyEnabled">编辑</a></span>
          <Divider type="vertical" />
          <Popconfirm title="是否确认删除？" @confirm="onDelete(record.id)" ok-text="确定" cancel-text="取消">
            <span v-per="'deleteComponent'"> <a v-if="record.modifyEnabled">删除</a></span>
          </Popconfirm>
        </template>
      </template>
    </Table>
    <Pagination
      class="mt-10px float-right"
      show-size-changer
      v-model:current="current"
      v-model:pageSize="pageSize"
      :total="total"
      :show-total="(total) => `共 ${total} 条`"
      @change="handleChange"
    />
  </Drawer>
  <BasicModal ref="componentModalRef" @success="successHandler"></BasicModal>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Table, Drawer, Pagination, Button, Divider, Popconfirm, message } from 'ant-design-vue';
import { deleteComponent, getComponentByPage } from '../../../../api/system-mgmt/app-mgmt/component';

import BasicModal from '/@/views/system-mgmt/app-mgmt/modal/BasicModal.vue';
import { columns } from '/@/views/system-mgmt/app-mgmt/drawer/data';
import { ApiResultEnum } from '/@/enums/resEnum';

const appId = ref();
let compList = ref([]);
const componentModalRef = ref('componentModalRef');
let current = ref(1);
const total = ref<number>(0);
const pageSize = ref(10);
let model = ref({});
const loading = ref(false);

const params = computed(() => {
  return {
    current: current.value,
    model: model.value,
    size: pageSize.value,
  };
});
const visible = ref(false);

const edit = (record) => {
  componentModalRef.value.openModal('component', appId.value, record);
};

const getCompList = async (id: string) => {
  try {
    params.value.model.appId = id;
    const res = await getComponentByPage(params.value);
    total.value = res.total;
    compList.value = res.items;
  } finally {
    loading.value = false;
  }
};

const handleChange = () => {
  getCompList(appId.value);
};

const openDrawer = (id: string) => {
  appId.value = id;
  getCompList(appId.value);
  visible.value = true;
};
const closeDrawer = () => {
  visible.value = false;
};

const successHandler = () => {
  getCompList(appId.value);
};
const componentHandler = () => {
  componentModalRef.value.openModal('component', appId.value, undefined);
};

const onDelete = async (id: string) => {
  await deleteComponent(id).then((res) => {
    if (res) {
      message.success(ApiResultEnum.DELETE_SUCCESS);
      successHandler();
    } else {
      message.error(ApiResultEnum.DELETE_FAIL);
    }
  });
};

defineExpose({ openDrawer, closeDrawer });
</script>
